<template>
	<div>
		<el-row>
			<el-col :span="24" class="banner">
				<el-dropdown @command="chooseClass" class="selectClass">
				<span class="el-dropdown-link">
    <span>班级：</span>{{ classname }}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item v-for="x in userlogin.classList" :command="x">{{ x.classname }}</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<el-dropdown @command="chooseCourse" class="selectCourse">
				<span class="el-dropdown-link">
    <span>科目：</span>{{ coursename }}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item v-for="x in userlogin.courseList" :command="x">{{ x.coursename }}</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
				<el-button type="warning" class="fr arrangeWork" @click="operate">布置作业</el-button>
			</el-col>
			<el-col :span="24" class="content">
				<div class="nav">
					<span class="_name">作业名称</span>
					<span class="_time">开始时间</span>
					<span class="_deadTime">结束时间</span>
					<span class="nums">作业总题数</span>
					<span class="_status">状态</span>
					<span class="_count">交作业人数</span>
					<span class="_operate">操作</span>
				</div>
				<ul>
					<li v-for="item in workList">
						<span>{{item.assignmentname}}</span>
						<span>{{item.updatetime}}</span>
						<span>{{item.validtime}}</span>
						<span>{{item.nums}}</span>
						<span>{{item.status}}</span>
						<span>{{item.studentnums0}}/{{item.studentnums1}}</span>
						<span @click="checkResult(item)">查看成绩</span>
					</li>
				</ul>
			</el-col>
		</el-row>
	</div>
	
</template>

<script>
	import api from '../../api';
	import { API_ROOT } from '../../util/config'
	import { getStore, setStore } from '../../util/util'
	import { mapState, mapMutations } from 'vuex'
	import $ from 'jquery'
	export default{
		data(){
			return {
				classname:'选择班级',
				classid:0,
				coursename:'选择科目',
				courseid:0,
				workList:[],
				currentWork:{},
			}
		},
		created(){
			this.INIT_STATE()
			console.log(this.userlogin)
			//默认获取所有的
			this.getrAssignmentRecordList({
				teacherid:this.userlogin.id,
				courseid:this.courseid,
				classid:this.classid,
			})
		},
		computed:{
			...mapState(["userlogin"])
		},
		methods: {
			...mapMutations(["INIT_STATE"]),
			chooseClass(x) {
				console.log(x)
				this.classname=x.classname;
				this.classid=x.classid;
				this.getrAssignmentRecordList({
					teacherid:this.userlogin.id,
					courseid:this.courseid,
					classid:this.classid,
				})
			},
			chooseCourse(x) {
				console.log(x)
				this.coursename=x.coursename;
				this.courseid=x.courseid;
				this.getrAssignmentRecordList({
					teacherid:this.userlogin.id,
					courseid:this.courseid,
					classid:this.classid,
				})
			},
			checkResult(item){
				let _this = this;
				this.currentWork = {
					'teacherid':_this.userlogin.id,
					'courseid':item.courseid,
					'rid':item.id,
					'assignmentid':item.assignmentid,
					'classid':item.classid,
					'type':-1
				};
				setStore('currentWork',this.currentWork);
				this.$router.push({path:'/workDetail/2'});	
				// api.getDetailsOfAssignmentRecord({}).then(response=>{
				// 	console.log(response)
				// })
			},
			getrAssignmentRecordList(obj){
				let _this = this;
				api.getrAssignmentRecordList(obj).then(response=>{
					_this.workList = response.data.data;
					console.log(response.data.data)
				})
			},
			operate(){
				this.$router.push({path:'/operatework/2'})
			}
		}
	}
</script>

<style scoped>
	.banner {
		padding-left: 30px;
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		background: #F2F2F2;
	}	
	
	.fr {
		float: right;
	}
	.arrangeWork{
		margin-top: 9px;
		width: 80px;
		padding: 0;
		height: 30px;
		margin-right: 20px;
		color: white;
		background-color: #14ACF4;
		outline: none;
		border: none;
	}
	.content{
		
	}
	.content>.nav{
		width: 100%;
		height: 48px;
		background: #F5FAFC;
	}
	.content>.nav span{
		display: inline-block;
		height: 100%;
		text-align: center;
		line-height: 48px;
		font-size: 14px;
		color: #4A4A4A;
		font-weight: bold;
	}
	.content>.nav span:nth-of-type(1){
		width: 19%;
	}
	.content>.nav span:nth-of-type(2){
		width: 18%;
	}
	.content>.nav span:nth-of-type(3){
		width: 18%;
	}
	.content>.nav span:nth-of-type(4){
		width: 10%;
	}
	.content>.nav span:nth-of-type(5){
		width: 10%;
	}
	.content>.nav span:nth-of-type(6){
		width: 10%;
	}
	.content>.nav span:nth-of-type(7){
		width: 12%;
	}
	.content ul li{
		height: 60px;
		line-height: 60px;
		text-align: center;
		border: 1px solid #F2F2F2;
	}
	.content ul li span{
		display: inline-block;
		font-size: 14px;
		color: #4A4A4A;
		font-weight: normal;
	}
	.content ul li span:nth-of-type(1){
		width: 19%;
	}
	.content ul li span:nth-of-type(2){
		width: 18%;
		color: #999999;
	}
	.content ul li span:nth-of-type(3){
		width: 18%;
		color: #999999;
	}
	.content ul li span:nth-of-type(4){
		width: 10%;
	}
	.content ul li span:nth-of-type(5){
		width: 10%;
	}
	.content ul li span:nth-of-type(6){
		width: 10%;
	}
	.content ul li span:nth-of-type(7){
		width: 12%;
		color: #14ACF4;
		cursor: pointer;
	}
	.el-dropdown{margin-right: 60px}
	.el-dropdown span>span{
		/* color: #000000; */
		font-weight: bold;
	}	
</style>